<template>
  <!-- 分配人员 -->
  <el-dialog :center="true" title="分配人员" :visible.sync="visible" width="80%" @close="cancel">
    <div v-loading="loadingdialog">
      <div class="header_title_box">
        <h2>待分配人员</h2>
      </div>
      <div class="filter-container">
        <el-input v-model="name" placeholder="人员名称" class="input-with-select mr64" @keyup.enter.native="query" />
        <el-button type="primary" @click="query">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div style="height: 250px; overflow: auto;">
        <el-table ref="bindWarehouseTable" v-loading="tableLoading" :data="userListData" tooltip-effect="dark" style="width: 100%" border>
          <el-table-column label="操作" align="center" fixed wdth="90px">
            <template slot-scope="scope">
              <span class="edit_style" @click="handlebind(scope.row, 'user')">绑定</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="用户名" prop="username" />
          <el-table-column align="center" label="邮箱" prop="email" />
          <el-table-column align="center" label="状态" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status===1?'正常':'禁用' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建人" prop="creator_name" />
          <el-table-column align="center" label="创建时间" prop="created_at" width="150px" />
          <el-table-column align="center" label="修改时间" prop="updated_at" width="150px" />
        </el-table>
      </div>
      <div class="header_title_box">
        <h2>已分配人员</h2>
      </div>
      <div class="mb25">
        <el-table ref="unbindWarehouseTable" :data="unuserListData" tooltip-effect="dark" style="width: 100%" border>
          <el-table-column label="操作" align="center" fixed width="90px">
            <template slot-scope="scope">
              <span class="edit_style" @click="handleDel(scope.row, 'user')">移除</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="用户名" prop="username" />
          <el-table-column align="center" label="邮箱" prop="email" />
          <el-table-column align="center" label="状态" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status===1?'正常':'禁用' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建人" prop="creator_name" />
          <el-table-column align="center" label="创建时间" prop="created_at" width="150px" />
          <el-table-column align="center" label="修改时间" prop="updated_at" width="150px" />
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer-center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  seeBindUser,
  userList
} from '@/utils/publicData'
export default {
  name: 'BindUserDialog',
  data() {
    return {
      loadingdialog: false,
      tableLoading: false,
      id: '',
      name: '',
      userListData: [], // 用户列表
      unuserListData: [], // 已绑定的用户列表 - 前端
      bindedUserIds: [], // 已绑定用户ids - 后台已经绑定的
      visible: false
    }
  },
  computed: {},
  created() {},
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.id = id
      vm.visible = true
      vm.initUserList(vm.id)
    },
    // 关闭
    cancel() {
      const vm = this
      vm.id = ''
      vm.unuserListData = []
      vm.userListData = []
      vm.visible = false
      vm.name = ''
    },
    // 提交
    submit() {
      const vm = this
      if (vm.unuserListData.length <= 0) {
        vm.$message.error('请至少选择一个用户')
      } else {
        const users = vm.unuserListData.map((arr) => {
          return arr.id
        })
        vm.$http
          .put(`/shop/bindUser/${vm.id}`, { users: users })
          .then((res) => {
            if (res.code === 10000) {
              vm.$message.success('绑定成功')
              vm.cancel()
              vm.$emit('submit')
            }
          })
      }
    },
    // 分配人员 userListData
    initUserList(id) {
      this.loadingdialog = true
      seeBindUser(id).then((tag) => {
        this.bindedUserIds = tag.map((arr) => {
          return arr.user_id
        })
        userList().then((data) => {
          data.map((arr) => {
            if (this.bindedUserIds.includes(arr.id)) {
              this.unuserListData.push(arr)
            } else {
              if (arr.status === 1) {
                this.userListData.push(arr)
              }
            }
          })
          this.loadingdialog = false
        })
      })
    },
    // 获取 用户列表
    query() {
      const vm = this
      vm.tableLoading = true
      userList(vm.name).then((data) => {
        vm.userListData = data.filter(e => !vm.bindedUserIds.includes(e.id) && e.status === 1)
        vm.tableLoading = false
      })
    },
    // 刷新
    refresh() {
      const vm = this
      vm.name = ''
      vm.query()
    },
    // 绑定人员
    handlebind(tag, type) {
      const data = this.userListData.splice(this.userListData.indexOf(tag), 1)
      this.unuserListData.push(data[0])
    },
    // 移除人员
    handleDel(tag, type) {
      const unIndex = this.unuserListData.indexOf(tag)
      const [data] = this.unuserListData.splice(
        unIndex,
        1
      )
      if (tag.status === 1) {
        this.userListData.push(data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    border: none
  }
</style>
